<template>
	<view class="announcement_wrapper">
		<view class="notice_column">
			<i class="iconfont icon-laba_"></i>
			<view class="notice_wrap">
				<view class="notice_content" :style="{'width': initNum + 'px','left': autoPlayConfig.left + 'px'}">
					<view class="notice_item" v-if="!noticeList[0].text">公告内容为空</view>
					<view class="notice_item" v-for="(item,index) in noticeList" :key="index" @click="jumpProductList(item)">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

    
<script>
	import { URLParams } from '@/utils/util'
	import * as type from '../../utils/device'
	export default {
		props: ["gonggao","prevent"],
		data(){
			return {
				initNum: 0,
				noticeList: [],
				autoPlayConfig: {
					timer: null,
					left: 0
				}
			}
		},
		computed: {
			device(){
				return type.default;
			},
		},
		created(){
			this.init();
		},
		mounted(){
			this.getItemsWidths();
		},
		methods:{
			init(){	// 页面初始化
				this.noticeList = this.$props.gonggao;
			},
			getItemsWidths(){	// 获取item项的宽度
				let [ _this,pNum,query ] = [ this,0,uni.createSelectorQuery().in(this) ];
				if (this.noticeList.length > 0) {
					query.select('.notice_wrap').boundingClientRect(data => {
						pNum = data.width;
					})
					query.selectAll('.notice_item').boundingClientRect(data => {
						data.forEach(v => _this.initNum += v.width);							
						_this.initNum > pNum && _this.autoScrollLeft(pNum);
					}).exec()					
				}				
			},
			autoScrollLeft(pNum){	// 自动滚动
				let [_this,query ] = [ this,uni.createSelectorQuery().in(this)];
				if (this.initNum > pNum) {
					if (this.device == 'MP-WEIXIN') {
						_this.autoPlayConfig.timer = setInterval(function(){
							if (Math.abs(_this.autoPlayConfig.left) >= pNum) {
								_this.autoPlayConfig.left = pNum;
							}
							_this.autoPlayConfig.left--;							
						},1000/60);
					} else {
						_this.autoPlayConfig.timer = requestAnimationFrame(function fn(){
							if (Math.abs(_this.autoPlayConfig.left) >= pNum) {
								_this.autoPlayConfig.left = pNum;
							}
							_this.autoPlayConfig.left--;					
							_this.autoPlayConfig.timer = requestAnimationFrame(fn);
						})
					}					
				}
			},
			jumpProductList(v){	// 跳转页面
				let id;		
				if (!v.url) return uni.showToast({ title: '配置参数不完整',icon: 'error' })
				if (v.url.indexOf('product') > -1) {
					id = URLParams(v.url).id;	
					if (!id) return uni.showToast({ title: '配置参数不完整',icon: 'error' })	
					uni.navigateTo({ url: `/pages/product/index?id=${id}` })
				}
				if (v.url.indexOf('livecontent') > -1) {
					id = URLParams(v.url).id;	
					if (!id) return uni.showToast({ title: '配置参数不完整',icon: 'error' })
					uni.navigateTo({ url: `/pages/livecontent/index?id=${id}` })
				}
			},
		}
	}
</script>

<style lang="scss">
.announcement_wrapper{
	width: 100%;
	padding: 0 10px 10px;
	box-sizing: border-box;
	.notice_column{
		width: 100%;
		height: 35px;
		background-color: #F4F6F7;
		border-radius: 50px;
		position: relative;
		padding: 0 10px 0 35px;
		box-sizing: border-box;
		.iconfont{
			font-size: 22px;
			color: blueviolet;
			position: absolute;
			left: 10px;
			top: 6px;
		}
		.notice_wrap{
			width: 100%;
			height: 35px;
			position: relative;
			overflow: hidden;
			.notice_content{	
				overflow: hidden;
				position: absolute;
				left: 0;
				top: 0;
				.notice_item{
					float: left;
					font-size: 13px;
					line-height: 35px;
					white-space: nowrap;
					word-break: break-all;
					color: blueviolet;
					box-sizing: border-box;
					padding: 0 10px 0 0;
				}
			}
		}
	}	
}
</style>